<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./assets/lib/layui/css/layui.css">
		<link rel="stylesheet" type="text/css" href="./assets/css/userSystem.css" />
		<link rel="stylesheet" type="text/css" href="./assets/lib/cropper/cropper.css"/>
		
		<script src="./assets/js/vue.js"></script>
		<script src="./assets/js/JQuery2.1.4.js"></script>
	</head>
	<body>
		<fieldset class="layui-elem-field" id="datum">
			<legend>大众会员</legend>
			<h4 class="layui-card-header layui-font-20">基本资料<span class="layui-font-12 layui-font-gray ">(头像可单独修改)</span></h4>

			<div class="pic layui-col-sm4">
				<img src="./assets/img/pic.jpg">
				<p class="layui-font-18" @click="show_modal">更换头像</p>
			</div>

			<form class="information layui-col-sm8">
				<div class="layui-card">
					昵称：<input type="text" name="nick" required lay-verify="required" v-model="datumObj.name"
						autocomplete="off" class="layui-input" disabled>
				</div>
				<div class="layui-card">
					用户名：<input type="text" name="user" required lay-verify="required" v-model="datumObj.user"
						autocomplete="off" class="layui-input" disabled>
				</div>
				<div class="layui-card">
					邮箱：<input type="text" name="email" required lay-verify="required" v-model="datumObj.email"
						autocomplete="off" class="layui-input" disabled>
				</div>
				<div class="layui-card">
					手机号：<input type="text" name="phone" required lay-verify="required" v-model="datumObj.phone"
						autocomplete="off" class="layui-input" disabled>
				</div>
				<div class="layui-card">
					性别： <span v-cloak v-html="sex !== undefined  ? sex ? '男' : '女' : ''"></span>
					<input type="radio" name="sex" id='man' value='true' v-model="datumObj.sex" checked><label for="man">男</label>
					<input type="radio" name="sex" id='woman' value='false' v-model="datumObj.sex"><label for='woman'>女</label>
				</div>
				<div class="layui-card">
					爱好： <span v-cloak v-html='like'></span>
					<input type="checkbox" name="like" value='写作' v-model="datumObj.like"> <label>写作</label>
					<input type="checkbox" name="like" value='阅读' v-model="datumObj.like"> <label>阅读</label>
					<input type="checkbox" name="like" value='发呆' v-model="datumObj.like"> <label>发呆</label>
				</div>
				
				<button @click.prevent="modify_datum" type="button" class="layui-btn layui-btn-primary">修改信息</button>
				<button @click.prevent="submit_datum" type="button" class="layui-btn modify">确认修改</button>
				
			</form>
			

		</fieldset>




	</body>
	<script src="./assets/lib/layui/layui.all.js"></script>
	<script src="./assets/lib/cropper/Cropper.js"></script>
	<script src="./assets/lib/cropper/jquery-cropper.js"></script>
	<script src="./assets/js/userSystem.js"></script>
	<script type="text/html" id="modal">
			<div class="modal-content">
				<h5><img src="./assets/img/pic.jpg" id="pic"></h5>
				<span class="preview">
					<i id="preview"></i>
					裁剪预览</span>
				<input type="file" name='upload_pic' id="upload_pic">
				<p>
					<button type="button" class="layui-btn upload">确定上传</button>
					<button id="uploadPic" type="button" class="layui-btn layui-btn-primary layui-border-blue">上传头像</button>
				</p>
			</div>
	</script>
</html>
